<!DOCTYPE html> 
<html> 
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<title>jQuery Mobile Docs - Transitions</title> 
	<link rel="stylesheet"  href="../../themes/default/" />  
	<link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
	<script src="../../js/jquery.js"></script>
	<script src="../../experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
	<script src="../_assets/js/jqm-docs.js"></script>
	<script src="../../js/"></script>
</head> 
<body> 

	<div data-role="page" class="type-interior">

		<div data-role="header" data-theme="f">
		<h1>Transitions</h1>
		<a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse" class="ui-btn-right jqm-home">Home</a>
	</div><!-- /header -->

	<div data-role="content">
		<div class="content-primary">		
		<h2>Page transitions</h2> 

		<p>The jQuery Mobile framework includes a set of six CSS-based transition effects that can be applied to any object or page change event, which apply the chosen transition when navigating to a new page and the reverse transition for the Back button. By default, the framework applies the right to left slide transition.</p>

		<p>To set a custom transition effect, add the <code>data-transition</code> attribute to the link. Possible values include: </p>

<code><code>
&lt;a href=&quot;index.html&quot; data-transition=&quot;pop&quot;&gt;I'll pop&lt;/a&gt;
</code></code>

		<p>
		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slide">slide</a>
		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slideup">slideup</a>
		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="slidedown">slidedown</a>
		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="pop">pop</a>
		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="fade">fade</a>
		<a href="#dialog" data-role="button" data-rel="dialog" data-transition="flip">flip *</a>
		</p>
		
        <p>NOTE: The flip transition isn't rendered correctly on most versions of Android because it lacks 3D CSS transform capabilities. Unfortunately, instead of ignoring the flip, Android makes the page "cartwheel" away by rotating instead of flipping. We recommend using this transition sparingly until support improves.</p>
		<p>In addition, you can also force a "backwards" transition by specifying <code>data-direction="reverse"</code> on your link. Note: (this was formerly <code>data-back="true"</code>, which will remain supported until 1.0)</p>
		
		<div class="ui-body ui-body-e">
			<p><strong>Transitions from <a href="http://www.jqtouch.com/">jQtouch</a></strong> (<em>with small modifications</em>): Built by David Kaneda and maintained by Jonathan Stark.</p>
		</div>
			

				</div><!--/content-primary -->		

				<div class="content-secondary">

					<div data-role="collapsible" data-collapsed="true" data-theme="b">

							<h3>More in this section</h3>

							<ul data-role="listview" data-theme="c" data-dividertheme="d">

								<li data-role="list-divider">Pages &amp; Dialogs</li>
								<li><a href="page-anatomy.html">Anatomy of a page</a></li>
								<li><a href="page-template.html" data-ajax="false">Single page template</a></li>
								<li><a href="multipage-template.html" data-ajax="false">Multi-page template</a></li>
								<li><a href="page-titles.html">Page titles</a></li>
								<li><a href="page-links.html">Linking pages</a></li>
								<li data-theme="a"><a href="page-transitions.html" data-ajax="false">Page transitions</a></li>
								<li><a href="page-dialogs.html">Dialogs</a></li>
								<li><a href="page-cache.html">Prefetching &amp; caching pages</a></li>
								<li><a href="page-navmodel.html">Ajax, hashes &amp; history</a></li>
								<li><a href="page-dynamic.html">Dynamically Injecting Pages</a></li>
								<li><a href="page-scripting.html">Scripting pages</a></li>
								<li><a href="pages-themes.html">Theming pages</a></li>

							</ul>
					</div>
				</div>		

			</div><!-- /content -->

			<div data-role="footer" class="footer-docs" data-theme="c">
					<p>&copy; 2011 The jQuery Project</p>
			</div>

			</div><!-- /page -->
			
			
			
			
			
			<div data-role="page" id="dialog"><!-- dialog-->

				<div data-role="header" data-theme="e">
					<h1>Ta-da!</h1>
				</div><!-- /header -->

				<div data-role="content" data-theme="e">
					<p>That was an animated page transition effect that we added with a <code>data-transition</code> attribute on the link.</p>
					<p>Since it uses CSS transforms, this should be hardware accelerated on many mobile devices.</p>
					<p>What do you think?</p>
					<a href="docs-transitions.html" data-role="button" data-theme="b" data-rel="back">I like it</a>   
				</div>
			</div>

			</body>
			</html>
